<template>
  <nut-row>
    <nut-col :span="24">
      <template v-for="item in messageList" :key="item.id">
        <nut-cell :title="item.text"></nut-cell>
      </template>

      <nut-cell :style="style">
        <nut-input v-model="input" placeholder="请输入文本" />
        <nut-button type="info" @click="handleSend">发送</nut-button>
      </nut-cell>
    </nut-col>
  </nut-row>
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { storeToRefs } from "pinia";
import { CSSProperties, ref } from "vue";
import { useCounterStore } from "../../stores/counter";
import "./index.scss";

const counter = useCounterStore();
const { messageList } = storeToRefs(counter);

const height = ref<number>(667);
const input = ref<string>("");

async function handleSend() {
  counter.fetch(input.value);
}

function main() {
  const info = Taro.getWindowInfo();
  height.value = info.screenHeight;
}
main();
Taro.onWindowResize((obj) => {
  // @ts-ignore
  height.value = obj.windowHeight;
});

const style: CSSProperties = {
  position: "fixed",
  bottom: "0",
};
</script>
